<div ng-show="currentNode">
    <!-- Back button -->
    <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
        <div class="euiFlexItem euiFlexItem--flexGrowZero">
            <h2 class="euiTitle euiTitle--medium">
                <md-button class="md-icon-button md-icon-button-back wz-padding-right-16 btn btn-info" aria-label="Back"
                    tooltip="Go back" tooltip-placement="bottom" ng-click="goNodes()"><i class="fa fa-fw fa-arrow-left"
                        aria-hidden="true"></i></md-button>
                Node {{ currentNode.name }}
            </h2>
        </div>
    </div>
    <!-- Node alerts summary card -->
    <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
        <div class="height-250 euiPanel euiFlexItem" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}"
            ng-show="!loading && currentNode && !showConfig">
            <md-card-content class="wazuh-column">
                <span
                    class="embPanel__header embPanel__title embPanel__dragger layout-row wz-headline-title">{{ currentNode.name }}
                    alerts summary</span>
                    <react-component style="height: 100%;"name="KibanaVisualization" props="{visId: 'Wazuh-App-Cluster-monitoring-Overview-Node', tab: 'monitoring'}"></react-component>
            </md-card-content>
        </div>
    </div>
    <!-- End node alerts summary card -->

    <!-- Node info and files cards section -->
    <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive"
        ng-show="currentNode && currentNode.healthCheck && currentNode.healthCheck">
        <!-- Node information card -->
        <div class="euiFlexItem" ng-show="currentNode && currentNode.healthCheck && currentNode.healthCheck.info">
            <div class="euiPanel euiPanel--paddingMedium">
                <span class="euiTitle euiTitle--small euiCard__title">Node information</span>
                <div class="euiSpacer euiSpacer--m"></div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">IP</span>
                    <span class="color-grey">{{currentNode.healthCheck.info.ip}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Version</span>
                    <span class="color-grey">{{currentNode.healthCheck.info.version}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Type</span>
                    <span class="color-grey">{{currentNode.healthCheck.info.type}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Name</span>
                    <span class="color-grey">{{currentNode.healthCheck.info.name}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Active agents</span>
                    <span class="color-grey">{{ currentNode.healthCheck.info.n_active_agents }}</span>
                </div>
            </div>
        </div>

        <!-- Last files sync card -->
        <div class="euiFlexItem" ng-show="currentNode && currentNode.healthCheck && currentNode.healthCheck.status">
            <div class="euiPanel euiPanel--paddingMedium">
                <span class="euiTitle euiTitle--small euiCard__title">Last files integrity synchronization</span>
                <div class="euiSpacer euiSpacer--m"></div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Last sync</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_integrity.date_end_master}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Duration</span>
                    <span class="color-grey">{{currentNode.healthCheck.status.last_sync_integrity.duration}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Total shared files</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_integrity.total_files.shared}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Total missing files</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_integrity.total_files.missing}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Total extra but valid files</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_integrity.total_files.extra_valid}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Total extra files</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_integrity.total_files.extra}}</span>
                </div>
            </div>
        </div>
    </div>
    <!-- End node info and files cards section -->

    <!-- Node agents cards section -->
    <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive"
        ng-show="currentNode && currentNode.healthCheck && currentNode.healthCheck.status">
        <!-- Agents sync card -->
        <div class="euiFlexItem">
            <div class="euiPanel euiPanel--paddingMedium">
                <span class="euiTitle euiTitle--small euiCard__title">Last agents information synchronization</span>
                <div class="euiSpacer euiSpacer--m"></div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Last sync</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_agentinfo.date_end_master}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Duration</span>
                    <span class="color-grey">{{currentNode.healthCheck.status.last_sync_agentinfo.duration}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Total agent info</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_agentinfo.total_agentinfo}}</span>
                </div>
            </div>
        </div>

        <!-- Groups sync card -->
        <div class="euiFlexItem">
            <div class="euiPanel euiPanel--paddingMedium">
                <span class="euiTitle euiTitle--small euiCard__title">Last agents groups synchronization</span>
                <div class="euiSpacer euiSpacer--m"></div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Last sync</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_agentgroups.date_end_master}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Duration</span>
                    <span class="color-grey">{{currentNode.healthCheck.status.last_sync_agentgroups.duration}}</span>
                </div>
                <div layout="row" class="wz-padding-top-10">
                    <span flex="30">Total agent info</span>
                    <span
                        class="color-grey">{{currentNode.healthCheck.status.last_sync_agentgroups.total_agentgroups}}</span>
                </div>
            </div>
        </div>
    </div>
    <!-- End node agents cards section -->
</div>